<template>
  <div>
    <h2>物流相关信息</h2>
    <div class="logistics-info-header">
      <div class="logistics-info-header-left">
        <slot name="color" :color="color" :fahuo="fahuo"></slot>
        <div class="logistics-company">{{ data.logisticsCompany }}</div>
        <div class="logistics-no">{{ data.logisticsNo }}</div>
      </div>
    </div>
    <ul
      class="logistics-info-list"
      v-for="(item, index) in data.logisticsInfo"
      v-isShow="flag"
      :key="index"
    >
      <li>
        <div class="logistics-info-list-time">{{ item.time }}</div>
        <div class="logistics-info-list-content">{{ item.content }}</div>
      </li>
    </ul>
    <button @click="flag = data.role">查看物流详情</button>
  </div>
</template>

<script>
export default {
  props: {
    ipt: String,
    data: Object
  },
  directives: {
    isShow: {
      inserted(el) {
        el.style.display = 'none'
      },
      update(el, flag) {
        if (flag.value === 'admin') {
          el.style.display = 'block'
        } else {
          alert('您没有权限')
        }
      }
    }
  },
  data() {
    return {
      isLook: false,
      flag: '',
      color: '',
      fahuo: ''
    }
  },
  created() {
    if (this.data.logisticsStatus === 0) {
      this.fahuo = '未发货'
      this.color = 'red'
    } else if (this.data.logisticsStatus === 1) {
      this.fahuo = '已发货'
      this.color = 'skyblue'
    } else if (this.data.logisticsStatus === 2) {
      this.fahuo = '已签收'
      this.color = 'green'
    } else if (this.data.logisticsStatus === 3) {
      this.fahuo = '未签收'
      this.color = 'gray'
    }
  },
  methods: {}
}
</script>

<style></style>
